<template>
    <div id="Orders">
        <my-breadcrumb/>
        <el-row class="main">
             <!--搜索框 -->
            <el-row>
                <el-col :span="7">
                  <search-input/>
                </el-col>
            </el-row>
            <!-- 表格 -->
            <el-row>
                <my-table-one :tableOptions='tableOptions' :tableData='tableData'>
                    <template #status='scope'>
                        <div>
                           
                            <el-tag :type="Number(scope.slotData.pay_status)?'success':'danger'">{{Number(scope.slotData.pay_status)?'已付款':'未付款'}}</el-tag>
                        </div>
                    </template>
                    <template #option='scope'>
                        <div>
                            {{scope.slotData.order_number}}
                        </div>
                    </template>
                    <template #time='scope'>
                        <div>
                            {{getShopTime(scope.slotData.create_time)}}
                        </div>
                    </template>
                </my-table-one>
            </el-row>
             <!-- 分页 -->
            <el-row>
          <el-col :span="24">
            <my-pagination :pageOption='pageOption'/>
          </el-col>
            </el-row>
        </el-row>
    </div>
</template>
<script>
import {getTime} from '@/utils/comm'
export default {
     name:'Orders',
     data() {
         return {
            tableOptions:[
                {prop:'order_number',label:'订单编号',width:'200'},
                {prop:'order_price',label:'订单价格',width:'200'},
                {prop:'pay_status',label:'是否付款',width:'200',slot:'status'},
                {prop:'is_send',label:'是否发货',width:'200'},
                {prop:'create_time',label:'下单时间',width:'200',slot:'time'},
                {prop:'option',label:'操作',width:'190',slot:'option'},
            ],
            btnOption:{
                addBtn:{
                    txt:'添加用户',
                },
                editBtn:{
                    txt:'修改用户',
                },
                allotBtn:{
                    txt:'分配角色',
                }
            },
            tableData: [],
            editIsshow:false,
            assignIsshow:false,
            addIsshow:false,
            pageOption:{
                current_page:1,
                page_sizes:[5,10, 20, 40],
                page_size:100,
                layout:'total, sizes, prev, pager, next, jumper',
                background:false,
                total:0
              },
            }
    },
     mounted(){
        //获取用户列表
       this.$store.dispatch('orders/Acs_getOrders',this.$store.state.orders.pagination)
    },
    watch:{
      '$store.state.orders.paginationData.total':function(newVal,oldVal){
          this.pageOption.total=newVal;
      },
      '$store.state.orders.paginationData.goods':function(newVal,oldVal){
          this.tableData=newVal
      }
    },
    methods:{
        getShopTime(data){
            return getTime(data*1000)
        }
    }
}
</script>
<style lang="scss" scoped>
    #Orders{
        .main{
            margin-top: 15px;
            background: #fff;
            padding: 20px;
        }
    }
</style>